{% include "header.html" %}

<div class="container">

    {% if messages %}
    {% for message in messages %}
    <div class="alert alert-success">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
        <span class="glyphicon glyphicon-ok"></span> {{ message }}
    </div>
    {% endfor %}
    {% endif %}

    <div id="study">
        <div align="center">
            <h2> Study: {{ study.name }} </h2>
        </div>

        <table class="table table-striped table-hover table-condensed">
            <th class="text-center active">Attribute</th>
            <th class="text-center success">Value</th>

            <tr>
                <td class="text-center active">Id</td>
                <td class="text-center success">{{ study.id }}</td>
            </tr>
            <tr>
                <td class="text-center active">Name</td>
                <td class="text-center success">{{ study.name }}</td>
            </tr>
            <tr>
                <td class="text-center active">Study Configuration</td>
                <td class="success">
                    <textarea id="json-input" class="hidden">{{ study.study_configuration }}</textarea>
                    <div id="json-container"></div>
                    <div class="text-center demo-options">
                        <button id="expand-all" class="btn btn-primary">Expand All</button>
                        <button id="collapse-all" class="btn btn-success">Collapse All</button>
                        <!-- No need to enable expend with levels
                        <button id="expand-levels" class="btn btn-danger">Expand Levels</button>
                        Levels: <input type="text" id="levels" value="1" />
                        -->
                    </div>

                </td>
            </tr>
            <tr>
                <td class="text-center active">Algorithm</td>
                <td class="text-center success">{{ study.algorithm }}</td>
            </tr>
            <tr>
                <td class="text-center active">Status</td>
                <td class="text-center success">{{ study.status }}</td>
            </tr>
            <tr>
                <td class="text-center active">Created Time</td>
                <td class="text-center success">{{ study.created_time }}</td>
            </tr>
            <tr>
                <td class="text-center active">Updated Time</td>
                <td class="text-center success">{{ study.updated_time }}</td>
            </tr>
        </table>

        <form action="/dashboard/v1/studies/{{ study.id }}/suggestions" method="post"
              onsubmit="return confirm('Do you want to generate the suggestions?');">
            <div class="form-group row">
                <label for="inputEmail3" class="col-sm-2 col-form-label"> Trials Number </label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="trials_number" value="1">
                </div>
            </div>
            <div class="form-group row">
                <div align="center">
                    <button type="submit" class="btn btn-primary">Generate Suggestions</button>
                </div>
            </div>
        </form>

    </div>

    <div id="trials">
        <div align="center">
            <h2> Trials </h2>
        </div>

        <table class="table table-striped table-hover table-condensed">
            <th class="text-center active">Id</th>
            <th class="text-center success">Study Id</th>
            <th class="text-center warning">Name</th>
            <th class="text-center danger">Parameter Values</th>
            <th class="text-center info">Objective Value</th>
            <th class="text-center active">Status</th>
            <th class="text-center success">Created Time</th>
            <th class="text-center warning">Updated Time</th>
            <th class="text-center danger">Operation</th>

            {% for trial in trials %}
            <tr>
                <td class="text-center active"><a
                        href="/dashboard/v1/studies/{{ trial.study_id }}/trials/{{ trial.id }}">{{ trial.id }}</a></td>
                <td class="text-center success">{{ trial.study_id }}</td>
                <td class="text-center warning">{{ trial.name }}</td>
                <td class="text-center danger">{{ trial.parameter_values }}</td>
                <td class="text-center info">{{ trial.objective_value }}</td>
                <td class="text-center active">{{ trial.status }}</td>
                <td class="text-center success">{{ trial.created_time }}</td>
                <td class="text-center warning">{{ trial.updated_time }}</td>
                <td class="text-center danger">
                    <input type="image" width="22px" src="/static/images/delete-icon.png" alt="Delete"
                           onclick="delete_resource('/dashboard/v1/studies/{{ trial.study_id }}/trials/{{ trial.id }}')"/>
                </td>
            </tr>
            {% endfor %}

        </table>
    </div>

</div><!-- end of container div -->

<script>
    $(function () {
        var jsonContainer = $('#json-container');

        var error = false;
        try {
            var json = JSON.parse($('#json-input').val());
        }
        catch (e) {
            error = true;
        }

        $('.error').toggleClass('hidden', !error);
        $('#output-container').toggleClass('hidden', error);

        jsonContainer
            .jsonPresenter('destroy') // Clear any previous JSON being presented through this plugin for this container
            .jsonPresenter({ // Use the jquery.jsonPresenter plugin using the input from the textarea above
                json: json
            })
            .jsonPresenter('expand', 0); // Expand all JSON properties so that none of them are collapsed


        $('#expand-all').on('click', function () {
            jsonContainer.jsonPresenter('expandAll');
        });

        $('#collapse-all').on('click', function () {
            jsonContainer.jsonPresenter('collapseAll');
        });

        $('#expand-levels').on('click', function () {
            var levels = parseInt($('#levels').val());
            jsonContainer.jsonPresenter('expand', levels);
        });
    });
</script>

{% include "footer.html" %}
